<template>
	<view id="listdetail">
		<view v-if="gk">
			<!-- 国控 -->
			<view class="site-name">
				<text>{{detailData.station}}</text>
			</view>
			<view class="type-total">
				<view class="item-text">
					<view class="left">AQI</view>
					<view class="right" :class="detailData.aqi?filterWarningValue(detailData.aqi):''">{{detailData.aqi}}</view>
				</view>
				<view class="item-text">
					<view class="left">PM10</view>
					<view class="right" :class="detailData.pm10?filterWarningValueTen(detailData.pm10):''">{{detailData.pm10}}</view>
				</view>
				<view class="item-text">
					<view class="left">PM2.5</view>
					<view class="right" :class="detailData.pm25?filterWarningValue(detailData.pm25):''">{{detailData.pm25}}</view>
				</view>
				<view class="item-text">
					<view class="left">O3</view>
					<view class="right">{{detailData.o3}}</view>
				</view>
				<view class="item-text">
					<view class="left">NO2</view>
					<view class="right">{{detailData.no2}}</view>
				</view>
				<view class="item-text">
					<view class="left">SO2</view>
					<view class="right">{{detailData.so2}}</view>
				</view>
				<view class="item-text">
					<view class="left">CO</view>
					<view class="right">{{detailData.co}}</view>
				</view>
			</view>
		</view>
		<view v-if="yc">
			<!-- 扬尘 -->
			<view class="site-name">
				<!-- <text>{{RaisedetailData.deviceName}}</text> -->
				<text>{{RaisedetailData.projectName}}</text>
			</view>
			<view class="type-total">
				<view class="item-text">
					<view class="left">PM10</view>
					<view class="right" :class="RaisedetailData.pm10?filterWarningValueTen(RaisedetailData.pm10):''">{{RaisedetailData.pm10}}</view>
				</view>
				<view class="item-text">
					<view class="left">PM2.5</view>
					<view class="right" :class="RaisedetailData.pm25?filterWarningValue(RaisedetailData.pm25):''">{{RaisedetailData.pm25}}</view>
				</view>
				<view class="item-text">
					<view class="left">噪声</view>
					<view class="right" :class="RaisedetailData.noise?filterWarningValueNoise(RaisedetailData.noise):''">{{RaisedetailData.noise}}</view>
				</view>
				<view class="item-text">
					<view class="left">温度</view>
					<view class="right">{{RaisedetailData.temperature}}</view>
				</view>
				<view class="item-text">
					<view class="left">湿度</view>
					<view class="right">{{RaisedetailData.humidity}}</view>
				</view>
				<view class="item-text">
					<view class="left">风速</view>
					<view class="right">{{RaisedetailData.windSpeed}}</view>
				</view>
				<view class="item-text">
					<view class="left">风向</view>
					<view class="right">{{RaisedetailData.windDirection}}</view>
				</view>
				<view class="item-text">
					<view class="left">TSP</view>
					<view class="right">{{RaisedetailData.tsp}}</view>
				</view>
				<view class="item-text">
					<view class="left">TVOC</view>
					<view class="right">{{RaisedetailData.tvoc}}</view>
				</view>
			</view>
		</view>
		<view v-if="zs">
			<!-- 噪声 -->
			<view class="site-name">
				<text>{{RaisedetailData.projectName}}</text>
			</view>
			<view class="type-total">
				<view class="item-text">
					<view class="left">噪声</view>
					<view class="right" :class="RaisedetailData.noise?filterWarningValueNoise(RaisedetailData.noise):''">{{RaisedetailData.noise}}</view>
				</view>
				<view class="item-text">
					<view class="left">温度</view>
					<view class="right">{{RaisedetailData.temperature}}</view>
				</view>
				<view class="item-text">
					<view class="left">湿度</view>
					<view class="right">{{RaisedetailData.humidity}}</view>
				</view>
				<view class="item-text">
					<view class="left">风速</view>
					<view class="right">{{RaisedetailData.windSpeed}}</view>
				</view>
			</view>
		</view>
		
		<u-gap height="5" bgColor="#eee"></u-gap>
		<view class="change-trend">
			<view class="trend">
				<view>24小时变化趋势</view>
				<u-tabs v-if="gk" :list="stateSearchFields" @click="clickStateTab"></u-tabs>
				<u-tabs v-if="yc" :list="raiseSearchFields" @click="clickRaiseTab"></u-tabs>
				<u-tabs v-if="zs" :list="noiseSearchFields" @click="clickNoiseTab"></u-tabs>
			</view>
			<view class="charts-box">
				<qiun-data-charts 
					type="area"
					:opts="opts"
					:chartData="chartData"
				  :ontouch="true"
				/>
			</view>
			<view v-if="queryParams.searchField == 'noise'" class="noise-tab">
				<view class="tab-in">
					<u-subsection :list="noiseList" mode="subsection" :current="curNow" @change="sectionChange"></u-subsection>
				</view>
			</view>
			<view class="table-box">
				<view class="table">
					<view class="tr">
						<view class="th">时间(h)</view>
						<view v-if="queryParams.searchField == 'noise'" class="th">噪声(db)</view>
						<view v-else class="th">{{ searchFieldName }}</view>
					</view>
					<view v-for="item in RaisedetailLine" class="tr">
						<view class="td">{{item[0]}}</view>
						<view class="td">{{item[1]}}</view>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="5" bgColor="#eee"></u-gap>
		<view class="info" v-if="showinfo">
			<view class="item-info">基础信息</view>
			<text>所属项目：{{filterValue(detailDataInfo.projectName)}}</text>
			<text>所属区域：{{filterValue(detailDataInfo.areaName)}}</text>
			<text>建设单位：{{filterValue(detailDataInfo.constructorName)}}</text>
			<text>负责人：{{filterValue(detailDataInfo.constructorContacts)}}</text>
			<text>电话：{{filterValue(detailDataInfo.constructorTel)}}</text>
			<text>施工单位：{{filterValue(detailDataInfo.builderName)}}</text>
			<text>负责人：{{filterValue(detailDataInfo.builderContacts)}}</text>
			<text>电话：{{filterValue(detailDataInfo.builderTel)}}</text>
		</view>
		<u-gap height="5" bgColor="#eee"></u-gap>
		<view class="detail-other">
			<u-cell-group :border="false">
				<view class="other-tit">详细信息</view>
				<view class="gk">
					<u-grid col="4">
						<u-grid-item>
							<view class="item-image">
								<u-image lazyLoad :showLoading="true"
									src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/rili.png"
									width="40" height="40" mode="aspectFill"></u-image>
							</view>
							<text class="grid-text">站点信息</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<u-image lazyLoad :showLoading="true"
									src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/zszd.png"
									width="40" height="40" mode="aspectFill"></u-image>
							</view>
							<text class="grid-text">数据分析</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<u-image lazyLoad :showLoading="true"
									src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/warn_zs.png"
									width="40" height="40" mode="aspectFill"></u-image>
							</view>
							<text class="grid-text">导航到站点</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<u-image lazyLoad :showLoading="true"
									src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/gjxx.png"
									width="40" height="40" mode="aspectFill"></u-image>
							</view>
							<text class="grid-text">告警记录</text>
						</u-grid-item>
					</u-grid>
				</view>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
import {getStateSiteDetail,getRaiseSiteDetail} from '@/api/site.js'
import {filterValue,PMWarningBarsbg} from '@/utils/common.js'
export default {
  data() {
    return {
			noiseList: ['昼间', '夜间'],
			curNow: 0,
			// 外部函数
			filterValue,
			PMWarningBarsbg,
			bgstyle:null,
			// 外部函数
			gk:false,
			yc:false,
			zs:false,
			detailData:{},
			RaisedetailData: {},
			detailDataInfo: {},
			RaisedetailLine: [],
			showinfo: false,
			chartData: {},
			opts: {
				color: ["#1890FF"],
				padding: [15,30,0,15],
				enableScroll: true,
				legend: {},
				xAxis: {
					disableGrid: true,
					scrollShow: true,
					itemCount: 10
				},
				yAxis: {
					gridType: "dash",
					dashLength: 4,
				},
				extra: {
					area: {
						type: "curve",
						opacity: 0.2,
						addLine: true,
						width: 2,
						gradient: true,
						activeType: "hollow"
					}
				}
			},
			queryParams: {
				searchField: '',
			},
			stateSearchFields: [
				{
						name: 'PM10',
				}, {
						name: 'PM2.5'
				}, {
						name: 'AQI',
				}, {
						name: 'O3'
				}, {
						name: 'NO2'
				}, {
						name: 'SO2'
				}, {
						name: 'CO'
				},
			],
			raiseSearchFields: [
				{
						name: 'PM10',
				}, {
						name: 'PM2.5',
				}, {
						name: '噪声'
				}, {
						name: '温度'
				}, {
						name: '湿度'
				}, {
						name: '风速'
				}, {
						name: '风向'
				}, {
						name: 'TSP'
				}, {
						name: 'TVOC'
				},
			],
			noiseSearchFields: [
				{
						name: '噪声',
				}, {
						name: '温度',
				}, {
						name: '湿度'
				}, {
						name: '风速'
				},
			],
			searchFieldName: 'PM10(μg/m3)'
    }
  },
  onReady() { 
	},
  onLoad(option) {
	  if(option.type === '0') {
			this.queryParams = option
		  this.gk = true
	  }else if(option.type === '1'){
			this.queryParams = option
		  this.yc = true
		  this.showinfo = true
	  }else {
			this.queryParams = option
		  this.zs = true
		  this.showinfo = true
	  }
	  this.type = option.type
	  delete option.type
		this.getStateSiteDetail(option)
  },
  methods: {
		// 噪声-切换白天黑夜按钮
		sectionChange(index) {
			this.curNow = index;
			this.getStateSiteDetail(this.queryParams)
		},
		clickStateTab(item) {
			if (item.name == 'AQI') {
				this.queryParams.searchField = 'aqi'
				this.searchFieldName = 'AQI'
			} else if (item.name == 'PM2.5') {
				this.queryParams.searchField = 'pm25'
				this.searchFieldName = 'PM2.5(μg/m3)'
			} else if (item.name == 'PM10') {
				this.queryParams.searchField = 'pm10'
				this.searchFieldName = 'PM10(μg/m3)'
			} else if (item.name == 'O3') {
				this.queryParams.searchField = 'o3'
				this.searchFieldName = 'O3(μg/m3)'
			} else if (item.name == 'NO2') {
				this.queryParams.searchField = 'no2'
				this.searchFieldName = 'NO2(μg/m3)'
			} else if (item.name == 'SO2') {
				this.queryParams.searchField = 'so2'
				this.searchFieldName = 'SO2(μg/m3)'
			} else if (item.name == 'CO') {
				this.queryParams.searchField = 'co'
				this.searchFieldName = 'CO(μg/m3)'
			}
			this.getStateSiteDetail(this.queryParams)
		},
		clickRaiseTab(item) {
			if (item.name == 'PM10') {
				this.queryParams.searchField = 'pm10'
				this.searchFieldName = 'PM10(μg/m3)'
			} else if (item.name == 'PM2.5') {
				this.queryParams.searchField = 'pm25'
				this.searchFieldName = 'PM2.5(μg/m3)'
			} else if (item.name == '噪声') {
				this.queryParams.searchField = 'noise'
				this.searchFieldName = '噪声(db)'
			} else if (item.name == '温度') {
				this.queryParams.searchField = 'temperature'
				this.searchFieldName = '温度(°C)'
			} else if (item.name == '湿度') {
				this.queryParams.searchField = 'humidity'
				this.searchFieldName = '湿度(hPa)'
			} else if (item.name == '风速') {
				this.queryParams.searchField = 'wind_speed'
				this.searchFieldName = '风速(m/s)'
			} else if (item.name == '风向') {
				this.queryParams.searchField = 'wind_direction'
				this.searchFieldName = '风向'
			} else if (item.name == 'TSP') {
				this.queryParams.searchField = 'tsp'
				this.searchFieldName = 'TSP'
			} else if (item.name == 'TVOC') {
				this.queryParams.searchField = 'tvoc'
				this.searchFieldName = 'TVOC(ppm)'
			}
			this.getStateSiteDetail(this.queryParams)
		},
		clickNoiseTab(item) {
			if (item.name == '噪声') {
				this.queryParams.searchField = 'noise'
				this.searchFieldName = '噪声(db)'
			} else if (item.name == '温度') {
				this.queryParams.searchField = 'temperature'
				this.searchFieldName = '温度(­°C)'
			} else if (item.name == '湿度') {
				this.queryParams.searchField = 'humidity'
				this.searchFieldName = '湿度(hPa)'
			} else if (item.name == '风速') {
				this.queryParams.searchField = 'wind_speed'
				this.searchFieldName = '风速(m/s)'
			}
			this.getStateSiteDetail(this.queryParams)
		},
	  filterWarningValue (num) {
	     return `color${PMWarningBarsbg['pm25'].filter(num)}`
	   },
	   filterWarningValueTen(num) {
		   return `color${PMWarningBarsbg['pm10'].filter(num)}`
	   },
	   filterWarningValueNoise(num) {
	   		   return `color${PMWarningBarsbg['noise'].filter(num)}`
	   },
	  // 国控
	  getStateSiteDetail(option) {
			let queryParams = []
			for (const k in option) {
				queryParams.push(`${k}=${(option[k])}`)
			}
			let query ='?'+queryParams.join('&')
			if (this.queryParams.searchField == 'pm10') {
				this.opts.extra.markLine = {
					type: 'dash',
					data: [
						{
							value: 250,
							showLabel: true,
							// labelText: '预警值',
							labelAlign: 'right',
							labelFontColor: '#ff4f49',
							labelFontSize: 8
						}
					]
				}
			} else if (this.queryParams.searchField == 'pm25') {
				this.opts.extra.markLine = {
					type: 'dash',
					data: [
						{
							value: 115,
							showLabel: true,
							labelAlign: 'right',
							labelFontColor: '#ff4f49',
							labelFontSize: 12
						}
					]
				}
			} else if (this.queryParams.searchField == 'noise') {
				if (this.curNow == 0) {
					this.opts.extra.markLine = {
						type: 'dash',
						data: [
							{
								value: 70,
								showLabel: true,
								// labelText: '预警值',
								labelAlign: 'right',
								labelFontColor: '#ff4f49',
								labelFontSize: 12
							}
						]
					}
				} else {
					this.opts.extra.markLine = {
						type: 'dash',
						data: [
							{
								value: 55,
								showLabel: true,
								labelAlign: 'right',
								labelFontColor: '#ff4f49',
								labelFontSize: 12
							}
						]
					}
				}
			} else {
				this.opts.extra.markLine = {}
			}
			if (option.station) {
				getStateSiteDetail(query).then(res=>{
					this.detailData = res.data.data.info
					this.RaisedetailLine = res.data.data.line
					this.getLineData( res.data.data.line)
				})
			} else {
				getRaiseSiteDetail(query).then(res=>{
					this.RaisedetailData = res.data.data.info
					this.detailDataInfo = res.data.data.project
					this.RaisedetailLine = res.data.data.line
					this.getLineData( res.data.data.line)
				})
			}
	  },
    getLineData(line) {
			const obj = {}
			const categories = []
			const linedata = []
			let str = line[0][1]
			if (str == 'noise') {
				str = '噪声'
			} else if (str == 'temperature'){
				str = '温度'
			} else if (str == 'humidity'){
				str = '湿度'
			} else if (str == 'wind_speed'){
				str = '风速'
			} else if (str == 'wind_direction'){
				str = '风向'
			} else if (str == 'tsp'){
				str = 'TSP'
			} else if (str == 'tvoc'){
				str = 'TVOC'
			} else if (str == 'aqi'){
				str = 'AQI'
			} else if (str == 'pm10'){
				str = 'PM10'
			} else if (str == 'pm25'){
				str = 'PM2.5'
			} else if (str == 'o3'){
				str = 'O3'
			} else if (str == 'no2'){
				str = 'NO2'
			} else if (str == 'so2'){
				str = 'SO2'
			} else if (str == 'co'){
				str = 'CO'
			}
			line.shift()
			line.map(item=>{
				categories.push(item[0].split('-')[2].split(' ')[1])
				linedata.push(item[1])
			})
			let res = {
				categories,
				series: [
					{
						name: str,
						data: linedata
					}
				]
			}
			this.chartData = JSON.parse(JSON.stringify(res))
    }
  }
};
</script>


<style lang="scss" scoped>
	#listdetail {
		// font-size: 24upx;
		height: 100vh;
		padding: 0 30upx;
		.site-name {
			font-size: 28upx;
			padding: 20upx 0 0 12upx;
		}
		.type-total {
			margin-top: 30upx;
			display: flex;
			flex-wrap: wrap;
			.item-text {
				height: 50upx;
				width: 33%;
				display: flex;
				line-height: 50upx;
				text-align: center;
				margin: 16upx 0upx;
				.left {
					width:42%;
					background-color: wheat;
					border-radius:30upx 0 0 30upx;
				}
				.right {
					width:42%;
					border-radius: 0 30upx 30upx 0;
					background-color: #30D385;
					color: #fff;
				}
			}
		}
		.trend {
			text-align: center;
			font-size: 32upx;
			margin-top: 20upx;
		}
		.info {
			// font-size: 24upx;
			padding: 20upx 0 60upx;
			.item-info {
				height: 40upx;
				line-height: 40upx;
				font-size: 30upx;
				text-align: center;
			}
			text {
				color: slategray;
				display: block;
				padding: 12upx 0 0 16upx;
			}
		}
		.color6 {
		  background-color: #D43030 !important;
		}
		.color5 {
		  background-color: #FF5733 !important;
		}
		.color4 {
		  background-color: #FF5733 !important;
		}
		.color3 {
		  background-color: #FF8D1A !important;
		}
		.color2 {
		  background-color: #FFD902 !important;
		}
		.color1 {
		  background-color: #30D385 !important;
		}
		.noise-tab {
			display: flex;
			justify-content: flex-end;
			margin-bottom: 30upx;
			.tab-in {
				width: 30%;
			}
			/deep/ .u-subsection--subsection {
				height: 50upx;
			}
		}
	}
	.table-box {
		margin-top: 20upx;   
		height: 420rpx;
    overflow-y: auto;
		.table {
			display: table;
			width: 100%;
			border-collapse: collapse;
			margin-bottom: 30px;
		}
		.th {
			display: table-cell;
			font-weight: bold;
			height: 100%;
			text-align: center;
			vertical-align: middle;
			background-color: $uni-bg-color-hover;
			color: $uni-color-primary;
		}
		.tr {
			display: table-row;
			line-height: 68upx;
			border-bottom: 1px solid $uni-bg-color-hover;
			color: #666;
		}
		.td {
			display: table-cell;
			height: 100%;
			// width: 100%;
			text-align: center;
			vertical-align: middle;
			width: 50%;
		}
	}
  .charts-box {
		width: 100%;
		height: 200px;
	}
	.detail-other {
		padding: 20upx 0 80upx;
		.other-tit {
			text-align: center;
			line-height: 60upx;
			font-size: 30upx;
		}
		.item-image {
			margin-top: 30upx;
		}
		.grid-text {
			margin-top: 10upx;
			padding-bottom: 20upx;
		}
	}
</style>